<template>
  <div class="box">
    {{ 1 + 1 }}
  </div>
  <el-button :type="type" style="width:100px" @click="add">测试</el-button>
  <div>
    <button @click="add">添加</button>
    <testProp :num="num" @change="onChange" ref="ctest"></testProp>
    {{ num }}
  </div>
  <textarea v-model="text" name="" cols="30" rows="10"></textarea>
  <textarea v-model="convertValue" name="" cols="30" rows="10"></textarea>
  <button @click="convert">操作</button>
  <div>
    <button @click="parentClick">调用父级方法</button>
  </div>
</template>
<script setup>
import testProp from './components/testProp.vue'
import { onMounted, ref, inject, getCurrentInstance } from 'vue'
const text = ref('')
const ctest = ref()
onMounted(() => {
  console.log(`helloworld,mounted`)
  const app = inject('app')
  app.add()
})

const parentClick = () => {
  ctest.value.add()
}
const convertValue = ref('')

const convert = () => {
  let value = text.value
  convertValue.value = value.replace(/(\d+)rpx/g, function(res) {
    let result = res.match(/(\d+)rpx/)
    result = `mpx(${result[1] / 100})`
    return result
  })
}

const proxy = getCurrentInstance()
console.log(proxy, 'proxy')

const onChange = (e) => {
  console.log(e, 'onChange')
}

const num = ref(0)
const add = () => {
  console.log(`helloworld`)
  num.value++
}
const type = 'primary'
</script>
<style type="text/css">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
</style>
